<%--
  Created by IntelliJ IDEA.
  User: lxm
  Date: 2018/5/11
  Time: 下午5:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>平台后端控制台</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/common.css">
</head>
<body>

<div class="layui-row layui-col-space15">
    <!--快捷入口开始-->
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">功能入口</div>
            <div class="layui-card-body">
                <div class="layui-carousel lau-carousel lau-shortcut">
                    <div carousel-item>
                        <ul class="layui-row layui-col-space10">
                            <li class="layui-col-xs3">
                                <a>
                                    <i class="layui-icon layui-icon-website"></i>
                                    <cite>弹层</cite>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a>
                                    <i class="layui-icon layui-icon-website"></i>
                                    <cite>弹层</cite>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a>
                                    <i class="layui-icon layui-icon-website"></i>
                                    <cite>弹层</cite>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a>
                                    <i class="layui-icon layui-icon-website"></i>
                                    <cite>弹层</cite>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a>
                                    <i class="layui-icon layui-icon-website"></i>
                                    <cite>弹层</cite>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a>
                                    <i class="layui-icon layui-icon-website"></i>
                                    <cite>弹层</cite>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a>
                                    <i class="layui-icon layui-icon-website"></i>
                                    <cite>弹层</cite>
                                </a>
                            </li>
                            <li class="layui-col-xs3">
                                <a>
                                    <i class="layui-icon layui-icon-website"></i>
                                    <cite>弹层</cite>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--快捷入口结束-->

    <!--待办事项开始-->
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">待办事项</div>
            <div class="layui-card-body">
                <div class="layui-carousel lau-carousel lau-todo">
                    <div carousel-item>
                        <ul class="layui-row layui-col-space10">
                            <li class="layui-col-xs6">
                                <a class="lau-todo-body">
                                    <h3>待审评论</h3>
                                    <p><cite>66</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs6">
                                <a class="lau-todo-body">
                                    <h3>待审评论</h3>
                                    <p><cite>66</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs6">
                                <a class="lau-todo-body">
                                    <h3>待审评论</h3>
                                    <p><cite>66</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs6">
                                <a class="lau-todo-body">
                                    <h3>待审评论</h3>
                                    <p><cite>66</cite></p>
                                </a>
                            </li>
                        </ul>
                        <ul class="layui-row layui-col-space10">
                            <li class="layui-col-xs6">
                                <a class="lau-todo-body">
                                    <h3>待审评论</h3>
                                    <p><cite>66</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs6">
                                <a class="lau-todo-body">
                                    <h3>待审评论</h3>
                                    <p><cite>66</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs6">
                                <a class="lau-todo-body">
                                    <h3>待审评论</h3>
                                    <p><cite>66</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs6">
                                <a class="lau-todo-body">
                                    <h3>待审评论</h3>
                                    <p><cite>66</cite></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--待办事项结束-->

    <!--系统负载开始-->
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">系统负载</div>
            <div class="layui-card-body lau-load lau-takerates">
                <div class="layui-progress" lay-showPercent="yes">
                    <h3>CPU使用率</h3>
                    <div class="layui-progress-bar" lay-percent="58%"></div>
                </div>
                <div class="layui-progress" lay-showPercent="yes">
                    <h3>内存占用率</h3>
                    <div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
                </div>
                <div class="layui-progress" lay-showPercent="yes">
                    <h3>转化率（日同比 28% <span class="layui-edge layui-edge-bottom"></span>）</h3>
                    <div class="layui-progress-bar" lay-percent="32%"></div>
                </div>
            </div>
        </div>
    </div>
    <!--系统负载结束-->

    <!--统计预览开始-->
    <div class="layui-col-md12">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-sm6">
                        <div class="lau-overview layui-bg-blue">
                            <h5>今日销售额<span>相比昨日 +26%</span></h5>
                            <h2>￥2,100<span class="layui-icon layui-icon-tubiao"></span></h2>
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <div class="lau-overview layui-bg-cyan">
                            <h5>本周销售额<span class="lau-fr">相比上周 -3%</span></h5>
                            <h2>￥42,000<span class="layui-icon layui-icon-tubiao"></span></h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-sm6">
                        <div class="lau-overview layui-bg-green">
                            <h5>本月销售额<span>相比上月 +21.2%</span></h5>
                            <h2>￥102,000<span class="layui-icon layui-icon-tubiao"></span></h2>
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <div class="lau-overview layui-bg-red">
                            <h5>今日注册量<span>相比昨日 +99%</span></h5>
                            <h2>7,010<span class="layui-icon layui-icon-tubiao"></span></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--统计预览结束-->

    <div class="layui-col-md8">
        <!--数据表格开始-->
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">今日热搜</li>
                        <li>今日热帖</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table id="hot-search"></table>
                        </div>
                        <div class="layui-tab-item">
                            <table id="hot-article"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--数据表格结束-->
    </div>

    <div class="layui-col-md4">
        <!--版本信息开始-->
        <div class="layui-card">
            <div class="layui-card-header">版本信息</div>
            <div class="layui-card-body layui-text">
                <table class="layui-table">
                    <tbody>
                    <tr>
                        <td>当前版本</td>
                        <td>v1.0.0 <a lau-href="/doc/changelog.html">更新日志</a></td>
                    </tr>
                    <tr>
                        <td>基于框架</td>
                        <td>layui-v2.2.6 <a href="http://www.layui.com/doc/base/changelog.html" target="_blank">更新日志</a>
                        </td>
                    </tr>
                    <tr>
                        <td>联系作者</td>
                        <td>
                            <a href="http://wpa.qq.com/msgrd?v=3&uin=296399959&site=qq&menu=yes" target="_blank">QQ</a>
                            /
                            <a href="mailto:su@revoke.cc">邮件</a> /
                            <a href="http://shang.qq.com/wpa/qunwpa?idkey=a4235da100d79f46b030940e2b41b80bd02d8ca5f21c6988e7759aac8d5700a9"
                               target="_blank">QQ群</a>
                        </td>
                    </tr>
                    <tr>
                        <td>获取渠道</td>
                        <td><a lau-event="about">点击查看</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--版本信息结束-->

        <!--文本开始-->
        <div class="layui-card">
            <div class="layui-card-header">相关说明</div>
            <div class="layui-card-body layui-text">
                <ul>
                    <li>LAU是经过<a href="http://www.layui.com/admin/" target="_blank">layuiAdmin</a>正版授权二次开发的项目，并非盗用源码，请知悉。
                    </li>
                    <li>LAU的部分样式是抄袭自<a href="http://www.layui.com/admin/" target="_blank">layuiAdmin</a>，基本都是控制台的样式。
                    </li>
                    <li>LAU不包含<a href="http://www.layui.com/admin/" target="_blank">layuiAdmin</a>源码。</li>
                    <li>LAU秉承开源精神，如果源码用于个人学习完全是免费的，如果用于商业项目，请向作者<a lau-href="/doc/license.html">购买授权</a>。</li>
                </ul>
            </div>
        </div>
        <!--文本结束-->
    </div>
</div>

</body>
<script src="/static/layui/layui.js"></script>
<script>
    layui.config({base: '/static/'}).extend({common: 'js/common'}).use(['table', 'common', 'carousel', 'element'], function () {
        var common = layui.common,
            $ = layui.$,
            layer = layui.layer,
            carousel = layui.carousel,
            element = layui.element,
            table = layui.table;


        //监听事件,这个不一定要用lau-event,可以自己写
        $(document).on('click', '[lau-event]', function () {
            var _this = $(this);
            switch (_this.attr('lau-event')) {
                case 'about':
                    $.get('/html/about.html', function (html) {
                        common.drawer({content: html});
                    });
                    break;
            }
        });

        //激活轮播
        $('.lau-carousel').each(function () {
            var that = $(this);
            carousel.render({
                elem: this,
                width: '100%',
                arrow: 'none',
                interval: that.data('interval'),
                autoplay: that.data('autoplay') === true,
                trigger: 'hover',
                anim: that.data('anim')
            });
        });

        //今日热搜
        var hotSearch = table.render({
            elem: '#hot-search',
            url: '/json/hot-search.json',
            page: true,
            cols: [[
                {title: 'ID', width: 40, type: 'numbers', fixed: 'left'},
                {
                    field: 'keywords', title: '标题', templet: function (d) {
                        return '<a class="layui-table-link">' + d.keywords + '</a>';
                    }
                },
                {field: 'frequency', title: '搜索次数', sort: true},
                {field: 'userNums', title: '用户数', sort: true}
            ]]
        });

        //今日热帖
        var hotArticle = table.render({
            elem: '#hot-article',
            url: '/json/hot-article.json',
            page: true,
            cols: [[
                {title: 'ID', width: 40, type: 'numbers', fixed: 'left'},
                {
                    field: 'title', title: '标题', templet: function (d) {
                        return '<a class="layui-table-link">' + d.title + '</a>';
                    }
                },
                {field: 'username', title: '发帖者'},
                {field: 'channel', title: '类别'},
                {field: 'crt', title: '点击率', sort: true}
            ]]
        });
    });
</script>
</html>